<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	*{
    		padding:0;
    		margin:0;
    	}
        #body {background-image:url(img/c.jpg);}
        #div1{z-index:-1;height:50px;width:50px;position:absolute;background:red;top:0px;left:0px;border-radius:25px;}
        .a1{
        	width:100%;
        	height:80px;
        	background-color:rgb(129,83,0);
        	/*z-index:99;*/
        }
        .a1>div{
        	float:left;
        	background-color: rgb(117,73,0);
        	width:100px;
        	height:40px;
        	margin-top:20px;
        	color:rgb(146,116,30);
        	line-height:40px;
        	text-align:center;
        	margin-left:50px;
        	z-index:999;
        }
        .a3{
        	display:none;
        	z-index:9999;
        }
        .a2:hover .a3{
        	z-index:9999;
        	background-color: aquamarine;
        	display:block;
        }
        /*div:not(#div1){
        	opacity:0.9;
        }*/
       div{
       	opacity: 0.9;
       }



        .a18{
        	color:rgb(208,188,65);
        	position:absolute;
        	top:55px;
        	right:50px;
        	height:50px;
        	width:100px;
        	font-size:25px;
        	text-align:center;
        	line-height:50px;
        }
        
        .a4{
        	margin-top:20px;
          width:25%;
          height:400px;
          float:left;
        }
        .a5{
        	width:100%;
        	height:100px;
        	text-align:center;
        }
        .a9{
        	margin:0 auto;
        	width:100px;
        	height:100px;
        	border-radius:50px;
        }
        .a6{
        	width:100%;
        }
        .a8,.a7{
        	width:8%;
        	float:left;
        	line-height:24px;
        	font-size:16px;
        	text-align: center;
        	color:rgb(208,188,65);
        }
        .a7{
        	margin-left:37%;
        }
        .a8{
        	margin-top:40px;
          margin-right:5%;
        }
        .a10{
        	margin-left:46%;
        	width:8%;
        	line-height:24px;
        	font-size:16px;
        	text-align: center;
        	color:rgb(208,188,65);
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        <!--当鼠标指针在元素内部移动时重复的触发 mosemove;-->
//      document.onmousemove=function(even)
//      {
//          var oDiv=document.getElementById('div1');
////            document.body  Chrome专用
//          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//          var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
//
//              var oEvent=even||event;
//              oDiv.style.top = (scrollTop+oEvent.clientY-25)+"px";
//              oDiv.style.left=(scrollLeft+oEvent.clientX-25)+"px";
//      }
$(document).mousemove(function(e){
	var oDiv=$('#div1');
	var scrollTop=$(document).scrollTop()||$('body').scrollTop();
	var scrollLeft=$(document).scrollLeft()||$('body').scrollLeft();
	oDiv.animate({top:(scrollTop+e.clientY-25)+"px",left:(scrollLeft+e.clientX-25)+"px"},18);
})

    </script>
</head>
<body id="body">
	<div class="a1">
		<div class="a2">首页	
		   <div class='a3'>
		   <div style="height:10px;width:100%;background-color:white;"></div>	
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   <div>糖画</div>
		   </div>
		</div>
		<div>起源历史</div>
		<div>糖画知识</div>
		<div>街市文化</div>
		<div>艺术展示</div>
	</div>
	<!--<div>
		<img src="img/timg.jpg" />
	</div>-->
    <div class="a4">
      <div class="a5">
      	<img src="img/timg.jpg" class="a9"/>
      </div>
      <div class="a6">
      	<div class="a7">画糖画时要注意</div>
      	<div class="a8">糖画的首要五大要素</div>
      </div>
    </div>


    <div class="a4">
      <div class="a5">
      	<img src="img/timg.jpg" class="a9"/>
      </div>
      <div class="a6">
      	<div class="a10">糖画的制作方法和技巧</div>
      </div>
    </div>
    
    <div class="a4">
      <div class="a5">
      	<img src="img/timg.jpg" class="a9"/>
      </div>
      <div class="a6">
      	<div class="a10">糖画的制作方法和技巧</div>
      </div>
    </div>

    <div class="a4">
      <div class="a5">
      	<img src="img/timg.jpg" class="a9"/>
      </div>
      <div class="a6">
      	<div class="a7">画糖画时要注意</div>
      	<div class="a8">糖画的首要五大要素</div>
      </div>
    </div>

    <div class="a18">糖画知识</div>

<div id="div1" >
</div>
</body>
</html>
